<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item
            label="选择日期"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 18, offset: 1 }"
          >
            <!-- <a-date-picker
              style="width: 60%"
              placeholder="交易时间"
              format="YYYYMMDD"
              @change="onChange"
              v-model="momentDate"
              :allowClear="isClear"
            /> -->
            <a-range-picker
              :disabledDate="disabledDate"
              @change="onChange"
              format="YYYYMMDD"
              v-model="momentDate"
            />
          </a-form-item>
        </a-col>
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="12">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch"
              >查询</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <p class="amountColor amountSize">
      实收分润总额：
      <span v-if="profitAmount">{{ profitAmount | amountFilter }}元</span>
    </p>
    <a-table
      size="middle"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="(record) => record.transDate + Math.random(10000)"
    >
      <!-- <span slot="transTime" slot-scope="record">{{record.transTime | timeFilter}}</span> -->
      <span slot="amount" slot-scope="record">{{
        (record.amount / 100).toFixed(2)
      }}</span>
      <span slot="feeAmount" slot-scope="record">{{
        (record.feeAmount / 100).toFixed(2)
      }}</span>
      <span slot="actualProfitAmount" slot-scope="record">{{
        (record.actualProfitAmount / 100).toFixed(2)
      }}</span>
      <!-- <span slot="action" slot-scope="record">
        <span @click="goDetail(record.transOrderNo)" style="color:#1890ff;">详细</span>
      </span>-->
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "会员编号",
    dataIndex: "merchantMemberNo",
    width: "15%",
    align: "center",
  },
  {
    title: "商户名称",
    dataIndex: "merchantName",
    width: "15%",
    align: "center",
  },
  { title: "交易类型", dataIndex: "transName", width: "10%", align: "center" },
  {
    title: "交易日期",
    // scopedSlots: { customRender: "transDate" },
    dataIndex: "transDate",
    width: "10%",
    align: "center",
  },
  {
    title: "交易金额(元)",
    scopedSlots: { customRender: "amount" },
    // dataIndex: "amount",
    width: "12%",
    align: "center",
  },
  {
    title: "商户手续费",
    scopedSlots: { customRender: "feeAmount" },
    // dataIndex: "feeAmount",
    width: "10%",
    align: "center",
  },
  {
    title: "实收分润",
    scopedSlots: { customRender: "actualProfitAmount" },
    // dataIndex: "actualProfitAmount",
    width: "9%",
    align: "center",
  },
  {
    title: "分润状态",
    dataIndex: "profitStatusName",
    width: "10%",
    align: "center",
  },
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      momentDate: null,
      excelurl: "",
      query: {
        data: {
          startDate: "",
          endDate: "",
        },
        page: 1,
        pageSize: 10,
      },
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      profitAmount: "",
      payedCount: null,
      totalAmount: null,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 },
        },
      },
    };
  },
  watch: {},
  filters: {
    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    amountFilter: function (value) {
      if (value) {
        return (value / 100).toFixed(2);
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    // this.handleSearch();
  },
  methods: {
    moment,
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    disabledDate(current) {
      return current > moment().subtract(0, "day");
    },
    onChange(date, dateString) {
      console.log(date, dateString);
      this.query.data.startDate = dateString[0];
      this.query.data.endDate = dateString[1];
      // this.handleSearch();
    },
    reset() {
      this.query.data = {
        agentCode: null,
        transCode: "all",
        settleStatus: "all",
        status: "all",
      };
    }, //重置
    handleSearch() {
      this.loading = true;
      console.info(this.query);
      api.profitQuery(
        this.query,
        (res) => {
          console.info(res);
          if (res.code == "OK") {
            this.loading = false;
            this.list = res.data.list;
            this.profitAmount = res.data.profitAmount;
            // this.list.forEach(function(item) {
            //   item.amount = item.amount.toFixed(2);
            // });
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
            // this.count = res.total; //总笔数
            // this.payedCount = res.payedCount; //成功笔数
            // this.totalAmount = res.totalAmount.toFixed(2); //总金额
          } else if (res.code == "DATA_NOT_EXISTS") {
            this.loading = false;
            this.$message.info(res.message);
            this.list = [];
            this.profitAmount = null;
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          } else {
            this.loading = false;
            // this.$message.info(res.message)
            this.list = [];
            this.profitAmount = null;
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        },
        (err) => {
          console.log("err", err);
          if (err) {
            this.loading = false;
          }
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #221c1c;
  font-weight: 400;
}

.amountSize {
  font-size: 15px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  /* padding: 30px 40px; */
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}
</style>